<!--
# Copyright (c) 2021, NVIDIA CORPORATION.  All rights reserved.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
-->
<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Automatic Speech Recognition</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.light_green-lime.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <style>
    .ui-resizable-se {
      bottom: 17px;
    }

    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <!-- Load from https://htmx.org/ -->
    <script src="https://unpkg.com/htmx.org@1.3.1"></script>
</head>
<body>

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">NeMo Automatic Speech Recognition Demo</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation. We hide it in small screens. -->
            <nav class="mdl-navigation mdl-layout--large-screen-only">
                <a class="mdl-navigation__link" href="#top">Top</a>
            </nav>
        </div>
    </header>
    <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">ASR Transcription</span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="https://github.com/NVIDIA/NeMo">Github</a>
        </nav>
    </div>
    <main class="mdl-layout__content">
        <div class="page-content">

            <!--Placeholder for top of app-->
            <div id="top"></div>

            <form id="model_names_form" action="" enctype="multipart/form-data" style="display: inline;">

                <h5> Model Name :

                    <!-- Format selectable list of models -->
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="width: 25%">
                        <select name="model_names_select" class="mdl-textfield__input" id="model_names_select_id">
                            {% for x in model_names %}
                            <option value="{{ x }}" {% if loop.first %} SELECTED{% endif %}>{{ x }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Load Model -->
                    <button class="btn mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"
                            hx-post="{{ url_for('initialize_model') }}" hx-target="this" hx-swap="afterend"
                            hx-encoding="multipart/form-data">
                        Load Model
                    </button>

                    <!-- Load .nemo checkpoint -->
                    <!-- Comment this section out to remove ability to upload files -->

                    &nbsp; <br>
                    NeMo File :
                    <input type="file" name="nemo_model" accept=".nemo" id="nemo_model_file"/>

                    <!-- Comment out upto here to remove ability to upload models -->

                </h5>

                <!-- GPU checkbox -->
                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="use_gpu_ckbx_id">
                    <input type="checkbox" id="use_gpu_ckbx_id" name="use_gpu_ckbx" class="mdl-checkbox__input" checked>
                    <span class="mdl-checkbox__label">Use GPU (if available)</span>
                </label>

            </form>

            <hr>
            <br>

            <!-- Form input for files -->
            <form action="" enctype="multipart/form-data">
                <input type="file" name="file" accept=".wav" multiple=""/>

                <button class="btn mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"
                        hx-post="{{ url_for('upload_audio_files') }}"
                        hx-target="this" hx-swap="outerHTML" hx-encoding="multipart/form-data">
                    Upload audio file(s)
                </button>

                <button class="btn mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"
                        hx-post="{{ url_for('remove_audio_files') }}"
                        hx-target="this" hx-swap="outerHTML">
                    Remove all files
                </button>
            </form>
            <hr>
            <br>

            <!-- Transcribe Button -->
            <button class="btn mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"
                    hx-post="{{ url_for('transcribe') }}" hx-target="#transcribeResults">
                Transcribe all
            </button>

            <div id="transcribeResults"></div>


            <!--Material Toast -->

            <div id="toast" class="mdl-js-snackbar mdl-snackbar">
                <div class="mdl-snackbar__text"></div>
                <button class="mdl-snackbar__action" type="button"></button>
            </div>

        </div>
    </main>
</div>

</body>
</html>